﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="Scripts/jQXB.1.1.js"></script>
    <script type="text/javascript" src="Scripts/jQXBmsgtopic.js"></script>
</head>
<body>
    <div>
        <h2>
            Dynamic Widget , Composite Pattern and Messaging</h2>
        <h3>
            "Select" link sends a "msg_cust_selected". Try the link now and after loading "Cust
            Details" and/or "Cust Extended Detail"</h3>
    </div>
    <div>
        <div id="listPanel" style="float: left;">
            <div>
                Updated: <span jqxb-datasource="objectDataSource" jqxb-datamember="Name" jqxb-bindedattribute="html">
                    [No Update]</span>
            </div>
            <div id="customerListPanel">
            </div>
            <input type="button" value="Load Cust Details" onclick="MainPage.loadCustDetailPanel(false);" />
            <input type="button" value="Load Cust Extended Details" onclick="MainPage.loadCustDetailPanel(true);" />
        </div>
        <div id="custDetailsPanelExt" style="float: left;">
        </div>
    </div>
</body>
<script type="text/javascript">
    var MainPage = {}
    MainPage.loadCustDetailPanel = function (bextended) {
        jQXBM.fireMessage(jQXBtopics.MSG_PREPARELOADING);
        if (bextended)
            jQuery('#custDetailsPanelExt').load('Index_CustomerDetailsExt.htm');
        else
            jQuery('#custDetailsPanelExt').load('Index_CustomerDetails.htm');
    }

    MainPage.displayUpdatedData = function (Customer) {
        jQXB.setDataSource("objectDataSource", Customer).doBind("objectDataSource");
    }

    jQuery('body').ready(function () {
        jQuery('#customerListPanel').html('loading...').load('Index_CustomerList.htm');
    });
    jQuery(document).ready(function () {
        jQXB.initialize();
        jQuery('#CustomerList').load('Index_Customerlist.html');
        jQXBM.subscribeMessage(jQXBtopics.MSG_CUSTOMER_UPDATED, MainPage.displayUpdatedData);

    });
</script>
</html>
